<script setup>

const options = ref()
const resolve = ref()

const popupRef = ref()

const inputText = ref()

const show = _options => {
    return new Promise(_resolve => {
        _options.autoClose = _options.autoClose ?? true
        _options.confirmText = _options.confirmText ?? '确认'
        _options.cancelText = _options.cancelText ?? '取消'
        inputText.value = ''
        options.value = _options
        resolve.value = _resolve
        popupRef.value.open()
    })
}

const confirm = confirm => {
    if (resolve.value) {
        resolve.value({
            confirm: confirm,
            value: inputText.value,
            close: () => popupRef.value.close()
        })
    }
    if (options.value.autoClose) {
        popupRef.value.close()
    }
}

defineExpose({
    show
})

qly.tool.setTool('qlyInputDialog', show)

</script>

<template>
    <uni-popup ref="popupRef">
        <view class="qly-input-dialog" v-if="options">
            <view v-if="options.title" class="title">{{ options.title }}</view>
            <view v-if="options.message" class="message">{{ options.message }}</view>
            <view class="input">
                <input v-model="inputText" :placeholder="options.placeholder"/>
            </view>
            
            <view class="btn-group">
                <view class="btn-item btn-cancel" @click="confirm(false)">{{ options.cancelText  }}</view>
                <view class="btn-item btn-confirm" @click="confirm(true)">{{ options.confirmText }}</view>
            </view>
        </view>
    </uni-popup>
</template>

<style scoped lang="scss">
.btn-cancel {
    color: #212121;
    background: #F7F7F7;
}

.btn-confirm {
    background: $qly-primary-color;
    color: #FFFFFF;
}

.input {
    margin-top: 32rpx !important;
    width: 100%;
    height: 80rpx;
    background: #F5F5F5;
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    
    input {
        width: 100%;
        height: 100%;
    }
}

.title {
    text-align: center;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 32rpx;
    color: #101010;
}

.message {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 32rpx;
    color: rgba(16, 16, 16, 0.5);
    line-height: 38rpx;
    text-align: center;
}

.btn-group {
    margin-top: 48rpx !important;
    display: flex;
    align-items: center;
}

.btn-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 72rpx;
    border-radius: 104rpx 104rpx 104rpx 104rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 28rpx;
}

.btn-item:not(:first-child) {
    margin-left: 24rpx;
}

.qly-input-dialog > view:not(:first-child) {
    margin-top: 16rpx;
}

.qly-input-dialog {
    
    padding: 48rpx 36rpx;
    box-sizing: border-box;
    background-color: #FFFFFF;
    margin-left: 56rpx;
    margin-right: 54rpx;
    width: 640rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    
    display: flex;
    flex-direction: column;
    
    
}
</style>
